<template>
<div>
  <el-table
      :data="tableData"
      border
      show-summary
      style="width: 100%">
    <el-table-column
        prop="id"
        label="购物车编号"
        width="180">
    </el-table-column>
    <el-table-column
        prop="goodsId"
        label="商品名称">
    </el-table-column>
    <el-table-column
        prop="userId"
        sortable
        label="用户名称">
    </el-table-column>
    <el-table-column
        prop="buyNum"
        sortable
        label="购买数量">

      <template slot-scope="scope">
        <el-input-number v-model="scope.row.buyNum" @change="handleChange(scope.row)" :min="0" :max="10" label="描述文字"></el-input-number>
      </template>
    </el-table-column>
    <el-table-column
        prop="totalPrice"
        sortable
        label="小计">
    </el-table-column>
  </el-table>
  <div style="margin-left: 950px;padding-top: 2px">
    <el-button @click="toPay" type="primary">去支付</el-button>
  </div>

</div>
</template>

<script>
export default {
  name: "CartView",
  data(){
    return{
      tableData:[]
    }
  },methods:{
    toPay(){
      //计算价格
      this.axios.post("http://192.168.21.1:8888/api/order/getTotalPriceByUid").then(resp=>{
        if(resp.data.msg=="success"){
          window.open("http://192.168.21.1:8083/pay/toPay?orderId="+resp.data.orderId+"&amount="+resp.data.amount);
        }
      })
    },
    handleChange(row) {
      if(row.buyNum==0){
        //该删除购物车
        console.log(row)
        this.axios.post("http://192.168.21.1:8888/api/order/delCartInfo",row).then(resp=>{
          if(resp.data=="success"){
            this.initData();//刷新列表
          }
        })
      }
      console.log(row);
      //更新购物车的数量和价格
      this.axios.post("http://192.168.21.1:8888/api/order/updateCartInfo",row).then(resp=>{
        if(resp.data=="success"){
          this.initData();//刷新列表
        }
      })
    },
    initData(){
      this.axios.get("http://192.168.21.1:8888/api/order/cartList").then(resp=>{
        this.tableData=resp.data
      })
    }
  },
  created() {
    this.initData();
  }
}
</script>

<style scoped>

</style>